<template>
<div style="margin-top: 15px;" class="number-input-group">
    <el-row name="number-select" class="number-select" style="width: 100%;">
      <el-col class="number-select-select" :span="10" style="display: flex;">
      <template v-if="value[0].type == 'select'">
        <el-select v-model="emit_data[value[0].key]" :placeholder="value[0].placeholder" @change="emitValue" >
         <el-option
            v-for="opt in value[0].data"
            :key="opt.value"
            :label="opt.label"
            :value="opt.value"
          />
        </el-select>
      </template>
    </el-col>
    <el-col style="display: flex;justify-content: center; align-items: center;" class="number-select-inner" :span="14" >

      <template v-for="(item, index) in value.slice(1)">
        <template v-if="item.type == 'select'">
          <el-select v-model="emit_data[item.key]" :placeholder="item.placeholder" @change="emitValue" >
          <el-option
              v-for="opt in item.data"
              :key="opt.value"
              :label="opt.label"
              :value="opt.value"
            />
        </el-select>
        </template>
        <template v-else>
          <el-input v-model.number="emit_data[item.key]"  :placeholder="item.placeholder" @change="emitValue"></el-input>
        </template>
         <template v-if="item.use_between">
          ~
         </template>
      </template>
      </el-col>
    </el-row>
</div>

</template>
<style lang="less">
  .el-select{
    width: 100% !important;
  }


.number-select {
  border: 1px solid #DCDFE6;
  border-radius: 4px;

  &-select {
  border-right: 1px solid #DCDFE6;
  }

  .el-input__inner {
    border: none !important;
  }
   .el-input  {
    width: 100% !important;
    border: none !important;
   }
  .input-with-select .el-input-group__prepend{
    background-color: #fff;
  }
  }
</style>
<script>
export default {
  
   props: {
    value: {
      type: Array,
      default: () => (
        [
          {type:'select',key:'select', default:'', placeholder:'请选择', data:[ { label: '选项1', value: '1' },
        { label: '选项2', value: '2' },
        { label: '选项3', value: '3' }]},
          {type:'input',key:'value1', default:'', placeholder:'最小值', use_between:true},
          {type:'input',key:'value2', default:'', placeholder:'最大值'},
        ]
      )
    },
    isRange: {
      type: Boolean,
      default: true
    },
    numberOnly: {
      type: Boolean,
      default: false
    }
  },

  // beforeMount(){

  //   this.value.forEach(element => {
  //       this.emit_data[element.key] = element.default !== undefined ? element.default : "";
  //   });
  // },
  mounted(){
  }, 
  data() {
  const initialEmitData = {};
  // 初始化 emit_data 的每一项
  (this.value || []).forEach(element => {
    initialEmitData[element.key] = element.default !== undefined ? element.default : "";
  });
  return {
    emit_data: initialEmitData
  };
},
  methods: {
    emitValue() {
      this.$emit('input', this.emit_data);
      console.log(this.emit_data);
    },
  }
}
</script>
